<!DOCTYPE html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

    * {
      font-family: 'Roboto', sans-serif;
    }

    TT {
      font-family: 'Terminal', monospace;
          background-color: #080a0b;
    }

    body {
      background-color: #181a1b;
      color: white;
    }

    .main {
      width: fit-content;
      margin: auto;
      max-width: 750px;
    }

    .main > section > :not(:first-child),
    .indent {
      margin-left: 20px;
    }

    .main a {
      color: #F44;
    }

    .configure {
      margin-bottom: 300px;
    }

    .install .iconify {
      color: green;
      filter: drop-shadow(0 0 0.75rem lime);
    }

    #changelog-body {
      white-space: break-spaces;
    }

    .where-to-get details summary::marker
    {
      content: '';
    }

    .where-to-get details[open] summary p 
    {
      display: none;
    }

  </style>
  <script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"></script>
  <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
  <script>
    async function fetchChangelog() {
      const response = await fetch("https://api.github.com/repos/suchmememanyskill/CYD-Klipper/releases/latest");
      const data = await response.json();
      document.getElementById("changelog-body").innerText = data.body;
      document.getElementById("changelog-header-version").innerText += data.tag_name;
    }

    function setInstallButton(esp){
      document.getElementById("install-btn").innerHTML = `<esp-web-install-button manifest="https://suchmememanyskill.github.io/CYD-Klipper/${esp}.json"></esp-web-install-button>`;
    }

    function setInstallButtonDefault(){
      setInstallButton("esp32-2432S028R")
    }

    fetchChangelog();
    window.onload = setInstallButtonDefault;
  </script>
</head>

<body>
  <section class="main">
    <h2>CYD-Klipper <span class="iconify" data-icon="mdi-printer-3d" style="color: #F44;"></span></h2>
    <p>An implementation of a wireless Klipper, Bambu and Octoprint status display on an ESP32 + screen.<br>Uses Moonraker to fetch data.<br><a href="https://github.com/suchmememanyskill/CYD-Klipper">Source code is available on GitHub</a>.</p>

    <section class="changelog">
      <h3 id="changelog-header"><span class="iconify" data-icon="mdi-hammer-wrench" style="color: lightgray;"></span> Changelog <span id="changelog-header-version"></span></h3>
      <p id="changelog-body"></p>
    </section>

    <section class="donate">
      <h3><span class="iconify" data-icon="mdi-heart" style="color:orangered; filter: drop-shadow(0 0 0.75rem crimson);"></span> Donate</h3>
      <p>If you found this project helpful, please consider a donation to <a href="https://ko-fi.com/suchmememanyskill">my Ko-Fi</a>.<br>It would help out a lot in the development of this project, due to the need to buy the screens.<br>Thank you!</p>
    </section>

    <section class="where-to-get">
      <details>
        <summary>
          <h3><span class="iconify" data-icon="mdi-shopping" style="color:orange; filter: drop-shadow(0 0 0.75rem orange);"></span> Where to buy hardware</h3>
          <p class="indent">(Click to expand)</p>
        </summary>
        <section class="indent">
          <p>All links below are affiliate links. Please also check yourself if there is a cheaper version available than the ones below. I have only linked ones that i have personally bought.</p>
          <i>ESP32-2432S028R (2.8" Resistive, Cheapest)</i>
          <ul>
            <li><a href="https://s.click.aliexpress.com/e/_omjsYBJ">USB C + microB version</a></li>
            <li><a href="https://s.click.aliexpress.com/e/_olKBkmz">Another USB C + microB version</a></li>
            <li><a href="https://s.click.aliexpress.com/e/_oCWhgmN">microB version</a></li>
          </ul>
          <i>ESP32-2432S032C (3.2" Capacitive)</i>
          <ul>
            <li><a href="https://s.click.aliexpress.com/e/_okbSGmd">Only the capacitive version is supported! USB-C</a></li>
            <li><a href="https://s.click.aliexpress.com/e/_oFygVwt">IPS version (not that great of a screen), Only the capacitive version is supported! USB-C</a></li>
          </ul>
          <i>ESP32-3248S035C (3.5" Capacitive)</i>
          <ul>
            <li><a href="https://s.click.aliexpress.com/e/_oCqygE9">microB version</a></li>
          </ul>
        </section>
      </details>

    </section>

    <section class="issues">
      <h3><span class="iconify" data-icon="mdi-github" style="color: white; filter: drop-shadow(0 0 0.75rem gray);"></span> Report Issues</h3>
      <p>If you experience any issues with this project, or have any feature requests for the project, please report them on the <a href="https://github.com/suchmememanyskill/CYD-Klipper/issues">issues tab on Github</a>.</p>
    </section>

    <section class="install">
      <h3><span class="iconify" data-icon="mdi-download"></span> Install</h3>
      <p>Select your device from the list below and click 'Connect'.<br>Note: You may need to hold the 'BOOT' button on the device while pressing install.<br><br>The 2.8" Resistive and 3.5" Capacitive models are best suited (in my opinion) for CYD-Klipper.<br><br>Note for any resistive models: You can clear touch calibration by holding the BOOT button for 8 seconds while the screen is on.</p>
      <select id="select-install-btn" onchange="setInstallButton(getElementById('select-install-btn').value)">
            {{%PORTS%}}
      </select>
      <span id="install-btn"></span>
    </section>

    <section class="configure">
      <h3><span class="iconify" data-icon="mdi-wrench" style="color: cyan; filter: drop-shadow(0 0 0.75rem blue);"></span> Config</h3>
      <p> After installing CYD-Klipper, you can configure it using its touchscreen, or serial console. To use the serial console,
          click 'Connect', select the serial port, select "LOGS &amp; CONSOLE" and reset the board without holding BOOT.<br>
          Type <tt>help</tt> for list of available commands. You're interested in <tt>ssid</tt>, <tt>ip</tt> and <tt>key</tt>. (while you <i>can</i> set <tt>touch</tt>, it's really better done using the touchscreen.)

    </section>
  </section>
</body>
